<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html version="-//W3C//DTD XHTML 1.1//EN"
      xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.w3.org/1999/xhtml
                          http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
>
	<head>
	
	   <!-- jquery ui -->
	    <link type="text/css" href="/code/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="/code/js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="/code/js/jquery-ui-1.8.17.custom.min.js"></script>
			
     	

	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	    <style type="text/css">@import url(/home/home.css);</style>
		
		<title>Home</title>	
		
        <script type="text/javascript" src="/code/jquery-1.7.min.js"></script>  
        <script type="text/javascript" src="/home/home.js"></script>  
        <script type="text/javascript" src="/code/jquery.preload.js"></script>

        <!-- Add fancyBox -->
        <link rel="stylesheet" href="/fancybox/jquery.fancybox.css?v=2.0.1" type="text/css" media="screen" />
        <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js?v=2.0.1"></script>
		
		
		   <!-- jquery ui -->
	    <link type="text/css" href="/code/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="/code/js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="/code/js/jquery-ui-1.8.17.custom.min.js"></script>
		

		

	</head>



	<body>
		
		<div id="page" class="coolBorder">	
			<div id="header">
                
                <div id="Div1" class=" logo " >
                
                        Bulletin Board
                    
			    </div>
                <div id="SignOut" class="moveRight" >
                
    				<span id="WelcomeMsg">
                          Welcome back! <% response.body+= request.user.name+" | "; %>
                    </span> 

                    <a href="/home">home</a>
                    <a href="/logout">logout</a>
                    
                   
			    </div>
            </div>
				<div id="Content" >
            <div class="spanFull">
            <div id="searchDiv">
                
                    <form action="/search" id="searchForm" method="post">    
                        <div>
                            <input name="txtSearch" type="text" id="txtSearch" style="float:left;width:130px;">
                            <input type="submit" value="Search">
                        </div>
                    </form>
                
            </div>
            </div>
            
    		 <div class="middleHome" >
	    
                
                <img class="profilePic coolBorder" src="<% response.body+= request.user.picture; %>" alt="profileimg"/>	
				<span class="profileName"><% response.body+= request.user.name; %></span>
				
            <div id="homeBoards" class="coolBorder">
               
			 <div class="topBoardDiv">
			    <span class="MyTitle">My Boards</span>
				
				<div id="createnewBoardDiv">
				     <button id="createNewBoard" class="SendButton  ">create board</button>
				</div>
			 </div>
				  <ol class="dribbbles group myOl ">
					
					<%
						var boards=request.getAttribute("boards");
						if(boards){
						for(var i=0;i<boards.length;i++){
					%>
						<li class="group ">
                    		<div class="dribbble">
							    <div class="dribbble-shot">
								   	<div class="dribbble-img">
										<a href="/board?name=<%response.body +=boards[i].name;%>" class="dribbble-link">   
                                    	<strong><%response.body +=boards[i].title;%></strong>
		                                <span class="dim"><%response.body +=" ";%></span>
                                        <em><%response.body +=boards[i].category;%></em>
                                        
										</a>
										<a href="/board?name=<%response.body +=boards[i].name;%>" class="dribbble-over" style="opacity: 0; ">
                                    	<strong><%response.body +=boards[i].title;%></strong>
		                                <span class="dim"><%response.body +=" ";%></span>
                                        <em><%response.body +=boards[i].category;%></em>
										</a>
	                               
									 </div>
									 <ul class="tools group nono">
										
										<li class="cmnt">
											<span ><%response.body +=boards[i].size;%></span>
										</li>
										
									</ul>
				                </div>
							  </div>
						 </li>


						<%}
						}%>
					</ol>

			</div>	
				
				
				
		<div id="dialog-form" title="Create new board">
	<p class="validateTips">Insert Board info.</p>

	<form>
	<fieldset>
		<label for="title">Title</label>
		<br>
		<input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />
		<label for="category">Category</label>
		<br>
        <select id="categoryList">
		    
			<%
						var categorys=request.getAttribute("categorys");
						if(categorys){
						for(var i=0;i<categorys.length;i++){
					%>
						 <option value="<%response.body +=categorys[i].id;%>"><%response.body +=categorys[i].Name;%></option>
						
        
		<%}}%>
		</select>
           <br>
        </fieldset>
	</form>
</div>  
    

            </div>
			<div id="Footer" >
			
				<div id="copyright">
						Powered by Baruch and Shimi 2012
					
					
				</div>
			</div>
	    </div>
	</body>
	
	
</html>